<template>
    <view>
        <view style="margin: 20rpx;color: #ccc;">
            ① 请确认银行卡号无出错<br />
            ② 提现之后不可更改，不可回退<br />
            ③ 请谨慎查看
        </view>
        <view style="background-color: white">
            <!-- 基础表单校验 -->
            <up-form :model="form" :rules="rules" label-width="90px" ref="formRef">
                <view class="form_part">
                    <up-form-item label="提现至" prop="bankAccountShow" border-bottom @click="openSelect">
                        <up-input disabled disabledColor="#fff" placeholder="请选择银行卡" border="none"
                            v-model="form.bankAccountShow" />
                        <template v-slot:right>
                            <up-icon name="arrow-right" />
                        </template>
                    </up-form-item>
                    <up-form-item label="提现金额" prop="amount" border-bottom>
                        <up-input placeholder="请输入要提现的金额" border="none" v-model="form.amount" />
                        <template v-slot:right>
                            <text>元</text>
                        </template>
                    </up-form-item>
                    <up-form-item label="验证码" prop="code">
                        <up-input border="none" v-model="form.code" placeholder="请输入验证码"></up-input>
                        <template v-slot:right>
                            <div style="width: 80px;">
                                <up-code ref="uCode" @change="codeChange"></up-code>
                                <up-button style="height: 35px;" type="primary" @tap="getCode"><span
                                        style="font-size: 10px;">{{ tips }}</span></up-button>
                            </div>
                        </template>
                    </up-form-item>
                </view>
            </up-form>
        </view>
        <view class="TranOut">
            <view class="allSmall">可转出{{ money }}元</view>
            <view class="allLarge" @click="allConfirm">全部提现</view>
        </view>
        <view class="form_button">
            <up-button type="primary" @click="confirmWithdraw">确认提现</up-button>
        </view>
    </view>

    <up-picker :show="show" :columns="[bankCardList]" keyName="bankAccountShow" title="请选择银行卡" @confirm="confirmSelect"
        @cancel="cancelSelect" />


    <up-toast ref="uToastRef"></up-toast>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import {
    accountNoPage,
    reflbankcard,
    withdrawSmsCode,
    getmoney
} from '@/api/driver'
import { showConfirm } from '@/utils/common'


/* 数据 */
const uToastRef = ref<any>(null)
const formRef = ref<UniFormRef | null>(null)
const uCode = ref<any>(null)
const show = ref(false)
// 可提现金额
const money = ref(0)
// 银行卡列表
const bankCardList = reactive<any[]>([])
// 表单
const form = reactive({
    bankAccountShow: '',
    bankAccount: '',
    amount: 0,
    code: ''
})
// 表单校验规则
const rules = reactive({
    bankAccountShow: {
        type: 'string',
        required: true,
        message: '请选择银行卡',
        trigger: ['blur', 'change']
    },
    code: {
        type: 'string',
        required: true,
        message: '请填写验证码',
        trigger: ['blur', 'change']
    },
    amount: [{
        type: 'number',
        required: true,
        message: '请填写要提现的金额',
        trigger: ['blur', 'change']
    },
    {
        pattern: /^(?!0+(\.0+)?$)\d+(\.\d+)?$/,
        message: '请输入大于0的数字',
        trigger: ['blur', 'change']
    }]
})
// 验证码提示
const tips = ref('')



/* 方法 */
// 确认提现
const confirmWithdraw = async () => {
    let valid = await formRef.value?.validate()
    if (valid) {
        let amount = Number(form.amount)
        let moneys = Number(money.value)

        if (amount > moneys) {
            uToastRef.value.show({
                position: "top",
                type: 'warning',
                message: "提现金额不能大于可提现金额"
            })
            return
        }

        // 弹出确认对话框
        let resModal = await showConfirm(`请确认提现银行卡信息是否正确：\n${form.bankAccount}`)
        if (!resModal.confirm) return
        uToastRef.value.show({
            message: "正在提现",
            type: 'loading',
            duration: -1
        })
        let res = await reflbankcard(form)
        uToastRef.value.hide()
        if (res.success) {
            uToastRef.value.show({
                position: "top",
                type: 'success',
                message: "提现成功"
            })
        }
    }
}
// 全部提现
const allConfirm = () => {
    form.amount = money.value
}
const codeChange = (text: string) => {
    tips.value = text
}
// 获取验证码
const getCode = async () => {
    if (!form.bankAccount) {
        uToastRef.value.show({
            position: "top",
            type: 'error',
            message: "请选择银行卡"
        })
        return
    }
    if (!form.amount || isNaN(form.amount) || Number(form.amount) <= 0) {
        uToastRef.value.show({
            position: "top",
            type: 'error',
            message: "请输入有效的金额(必须大于0)"
        })
        return
    }
    if (uCode.value.canGetCode) {
        uToastRef.value.show({
            type: 'loading',
            message: "正在获取验证码",
            duration: -1
        })
        let codeRes = await withdrawSmsCode(form)
        uToastRef.value.hide()
        if (codeRes.success) {
            uToastRef.value.show({
                position: "top",
                type: 'success',
                message: "验证码已发送"
            })
        }
        // 通知验证码组件内部开始倒计时
        uCode.value.start()
    } else {
        uToastRef.value.show({
            position: "top",
            type: 'warning',
            message: "倒计时结束后再发送"
        })
    }
}
// 确认选择银行
const confirmSelect = (e: any) => {
    form.bankAccountShow = `${e.value[0].bank}(${e.value[0].bankAccount})`
    form.bankAccount = e.value[0].bankAccount
    cancelSelect()
}
// 开启银行选择
const openSelect = () => {
    show.value = true
}
// 关闭银行选择
const cancelSelect = () => {
    show.value = false
}
// 获取可提现金额
const getMoneys = async () => {
    uToastRef.value.show({
        message: "加载中",
        type: 'loading',
        duration: -1
    })
    let res = await getmoney()
    uToastRef.value.hide()
    if (res.success) {
        money.value = res.data
    }
}
// 获取银行卡列表
const getBankCardList = async () => {
    uToastRef.value.show({
        message: "加载中",
        type: 'loading',
        duration: -1
    })
    let res = await accountNoPage()
    uToastRef.value.hide()
    if (res.success) {
        bankCardList.push(...res.data.list.map((item: any) => {
            return {
                ...item,
                bankAccountShow: `${item.bank}${item.bankAccount}`
            }
        }
        ))
    }
}
// 初始化封装
const init = async () => {
    await getMoneys()
    await getBankCardList()
}



/* 钩子 */
onMounted(async () => {
    await init()
})

</script>

<style scoped>
.form_part {
    background-color: #fff;
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.form_button {
    margin-left: 5%;
    width: 90%;
}

.TranOut {
    display: flex;
    justify-content: space-between;
    padding: 0 10px 45px 10px;
    color: royalblue;
    letter-spacing: 1px;
}

.allSmall {
    font-size: 12px;
}

.allLarge {
    font-size: 15px;
}
</style>
